<template>
    <div>
        <div class="qqqq">
            <div class="credit-list-com banner flex">
                <div class="width55">
                    <el-carousel :interval="5000" arrow="always">
                        <el-carousel-item v-for="item in carouselFigureData" :key="item">
                          <img :src="item">
                        </el-carousel-item>
                      </el-carousel>
                </div>
                <div class="left-contain width45">
                    <div class="content-title">热门主题卡</div>
                    <div class="top-right flex">
                        <div class="top-right-left">
                            <div v-for="i in themeCardListData"><theme-card :creditProData="i" ></theme-card></div>
                        </div>
                        <div class="top-right-right credit-card-progress-search">
                            <div class="credit-card-progress-search-title">信用卡进度查询</div>
                            <el-form :model="ruleForm2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                                <el-form-item label="所属银行" prop="pass">
                                    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="手机号" prop="checkPass">
                                    <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm('ruleForm2')">进度查询</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="qqqq">
            <div class="credit-list-com flex">
                <div class="left-contain">
                    <div class="content-title">本周热门卡推荐</div>
                    <div class="www flex card-height">
                        <credit-card :creditProData="i" v-for="i in creditCardListData"></credit-card>
                    </div>
                    <div class="content-title">本周银行</div>
                    <div class="www flex ">
                        <credit-bank class="card-div" :creditProData="i" v-for="i in creditBankListData"></credit-bank>
                    </div>
                </div>
                <div>
                    <notice-list :indexfirstListData="indexListSecData"></notice-list>
                </div>
            </div>
        </div>
        <div class="qqqq">
            <div class="credit-list-com flex">
                <div class="left-contain">
                    <div class="content-title">本周热门贷款口子</div>
                    <div class="www height80 flex">
                        <credit-product :creditProData="i" v-for="i in creditProData"></credit-product>
                    </div>
                </div>
                <div>
                    <notice-list :indexfirstListData="indexfirstListData"></notice-list>
                </div>
            </div>
        </div>
         <div class="qqqq">
            <div class="credit-list-com flex">
                <div class="left-contain">
                    <div class="content-title">常用工具</div>
                    <div class="www flex card-height">
                      <el-button type="primary" @click="goTo('/SearchPage', 0)">公积金查询</el-button>
                      <el-button type="primary" @click="goTo('/SearchPage', 3)">征信查询</el-button>
                      <el-button type="primary" @click="goTo('/SearchPage', 1)">社保查询</el-button>
                      <el-button type="primary" @click="goTo('/SearchPage', 2)">房贷查询</el-button>
                    </div>
                </div>
                <div>
                    <img src="//www.cardbaobao.com/images/cbblogos.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import noticeList from "components/notice-list"
import creditProduct from "components/credit-product"
import creditCard from "components/credit-card"
import creditBank from "components/credit-bank"
import themeCard from "components/theme-card"
import { indexList1 } from '@/common/js/index/list1'
import { indexList2 } from '@/common/js/index/list2'
import { indexCreditProductList } from '@/common/js/index/creditProductList'
import { indexCreditCardList } from '@/common/js/index/creditCardList'
import { indexCreditBankList } from '@/common/js/index/creditBankList'
import { indexThemeCardList } from '@/common/js/index/themeCardList'
import { indexCarouselFigure } from '@/common/js/index/carouselFigure'

export default {
    data() {
        return {
            indexfirstListData: [],
            indexListSecData: [],
            creditProData: {},
            creditCardListData: {},
            creditBankListData: {},
            ruleForm2: {},
            themeCardListData: [],
            carouselFigureData: []
        }
    },
    components: {
        noticeList,
        creditProduct,
        creditCard,
        creditBank,
        themeCard
    },
    mounted() {
        this.indexfirstListData = indexList1
        this.indexListSecData = indexList2
        this.creditProData = indexCreditProductList
        this.creditCardListData = indexCreditCardList
        this.creditBankListData = indexCreditBankList
        this.themeCardListData = indexThemeCardList
        this.carouselFigureData = indexCarouselFigure
    },
    methods: {
        // 页面跳转
        goTo (r, t) {
            this.$router.push({ path: r, query: { type: t } })
        }
    }
}

</script>
<style scoped lang="less">
@import "../common/less/variable.less";
.qqqq {
    margin-bottom: .3rem;
    .content-title {
        width: 100%;
        height: .4rem;
        background: #DCDCDC;
    }
}

.credit-list-com {
    >div {
        &:first-child {
            width: 70%;
            margin-right: .1rem;
            >.www {
                width: 100%;
                flex-wrap: wrap;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
            }
            .card-height {
                height: 60%;
                padding-bottom: .05rem;
            }
        }

        &:last-child {
            width: 30%;
        }
    }
    .left-contain {
        border: 1px solid #DCDCDC;
    }
    .height80 {
        height: 85%;
    }
    .card-div {
        padding-right: 6%;
        &:last-child {
            padding-right: 0;
        }
    }
}

.banner {
    .width45 {
        width: 45% !important;
    }
    .width55 {
        width: 55% !important;
        .el-carousel__item {
            img {
                width: 100%;
                height: 100%;
            }
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    }
}

.top-right {
    .top-right-left {
      >div {
        >div{
          >img {
              width: .5rem;
              height: .5rem;
          }

        }
      }

    }
}

.credit-card-progress-search {
    width: 40%;
    margin-top: .1rem;
    margin-left: .3rem;
    border: 3px solid #DEDEDE;
    border-radius: .2rem;
    padding-right: .2rem;
    .credit-card-progress-search-title {
        font-size: .24rem;
        text-align: center;
        line-height: .5rem;
    }
}

</style>
